<template>
  <div>
    <img class="bgone" :src="require('@/assets/login_bks.png')" />
    <!-- logo -->
    <div class="show_logo">
      <img :src="require('@/assets/logos.png')" alt srcset />
    </div>
    <div class="table">
      <div class="table-content flex flexR center">
        <!-- 客户电话 -->
        <div class="service-phone">客服电话：{{$config.servicePhone}}</div>
        <img class="pic" :src="require('@/assets/login_bk.png')" />

        <!-- 账号登录 -->
        <div class="login-info">
          <div class="login-title">自由职业者综合服务管理后台</div>
          <div class="user flex flexR center Ma br">
            <el-input 
            v-model.trim="user_name" 
            ref="user_name" 
            autocomplete="off" 
            suffix-icon="el-icon-user"
            placeholder="请输入用户名"></el-input>
          </div>
          <div class="password flex flexR center Ma br">
            <el-input
              type="password"
              name="密码"
              placeholder="请输入密码"
              v-model.trim="password"
              ref="password"
              suffix-icon="el-icon-lock"
              :show-password="true"
            ></el-input>
          </div>
          <div class="vcode flex flexR flexJ Ma br">
            <div class="flex flexR flexJ center" style="width:200px">
              <el-input
                ref="v_code"
                style="width:100%"
                type="text"
                name="验证码"
                placeholder="请输入手机验证码"
                @keyup.enter.native="login_into"
                v-model.trim="v_code"
              ></el-input>
            </div>
            <el-button
              type="info"
              @click="send_code"
              :style="{width:'130px'}"
            >{{send_code_show==false?"发送验证码":code_num}}</el-button>
          </div>
          <div class="btn-login flex flexR center">
                         <el-button class="btn" type="primary" @click="login_into">登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "login",
  data() {
    return {
      user_name: "", //用户名
      password: "", //密码
      v_code: "", //验证码
      flag: true, //是否发送验证码成功
      send_code_show: false,
      code_num: 120
    };
  },
  mounted() {
    localStorage.removeItem("pathObj");
    localStorage.removeItem("showNav");
    localStorage.removeItem("showNavTop");
    localStorage.removeItem("store");
  },
  // 属性监听
  watch: {},
  // 页面事件
  methods: {
    login_into() {
      var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
      if (
        userAgent.indexOf("MSIE 8.0") > -1 ||
        userAgent.indexOf("rv:11.0) like Gecko") > -1
      ) {
        var r = confirm(
          "系统暂不支持IE，建议使用谷歌浏览器！\n 去官网下载谷歌浏览器。"
        );
        if (r === true) {
          $("#loader-wrapper").css({ display: "block" });
          $("#app").css({ display: "none" });
          var google = "https://www.google.cn/intl/zh-CN/chrome/";
          window.open(google);
        } else {
          this.login_info();
        }
      } else {
        this.login_info();
      }
    },
    login_info() {
      if (!this.flag) {
        this.$message.error("请先发送验证码");
        return;
      }
      if (this.user_name == "") {
        this.$message.error("请填写用户名");
        this.$refs.user_name.focus();
        return;
      }
      if (this.password == "") {
        this.$message.error("请填写密码");
        this.$refs.password.focus();
        return;
      }
      if (this.v_code == "") {
        this.$message.error("请填写验证码");
        this.$refs.v_code.focus();
        return;
      }
      let post_data = {
        user_name: this.user_name,
        password: this.password,
        v_code: this.v_code
      };
      this.$raxios
        .post(this.$mapapi.adminLogin, { data: post_data })
        .then(res => {
          if (res.code != 200) return Promise.reject(res.msg);
          this.$message.success(res.msg);

          let update_store = {
            user_data: res.data.user_data, //保存用户信息
            navList: res.data.permission, //保存用户左侧显示的导航栏信息
            buttonPermission: res.data.button_permission,   //按钮权限
            token: res.data.token //保存用户的token 信息
          };
          console.log(update_store)
          this.$store.commit("changeState", update_store);
          localStorage.setItem("store", JSON.stringify(this.$store.state));
          //进入后台
          this.$router.replace({ path: "/" });
        })
        .catch(res => {
          this.$message.error(res);
        });
    },
    send_code() {
      if (this.send_code == true) {
        return;
      }
      //发送验证码
      if (this.user_name == "") {
        this.$message.error("请先输入用户名");
        return;
      }
      this.$raxios
        .post(this.$mapapi.adminSendSms, {
          data: { user_name: this.user_name }
        })
        .then(res => {
          if (res.code != 200) return Promise.reject(res.msg);
          this.timeOut();
          this.$message.success(res.msg);
          this.flag = true;
        })
        .catch(res => {
          this.$message.error(res);
        });
    },
    timeOut() {
      this.send_code_show = true;
      let num = 120;
      let T = setInterval(() => {
        num -= 1;
        this.code_num = num + "s";
        if (num <= 0) {
          clearInterval(T);
          this.send_code_show = false;
        }
      }, 1000);
    }
  },
  //  创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
  created() {
    //  console.log("（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来")
  }
};
</script>

<style lang="less" :scope="true" src="@/style/login.less" >
</style>